<template>

  <div>
    <Row>
    <Card>
      <div class="top-tool-bar">
        <DatePicker type="year" placeholder="选择年份" style="width: 100px"></DatePicker>
对象1 :
        <Select v-model="model1" style="width:100px" placeholder="请选择省份">
          <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>

        <Select v-model="model1" style="width:100px" placeholder="请选择城市" >
          <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>

        <Select v-model="model1" style="width:100px" placeholder="请选择区县" >
          <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>

        <Select v-model="model1" style="width:100px" placeholder="站点">
          <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        对象2 :
        <Select v-model="model1" style="width:100px" placeholder="请选择省份">
          <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>

        <Select v-model="model1" style="width:100px" placeholder="请选择城市" >
          <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>

        <Select v-model="model1" style="width:100px" placeholder="请选择区县" >
          <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>

        <Select v-model="model1" style="width:100px" placeholder="站点">
          <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>

        <Button type="primary" icon="ios-search" >搜索</Button>

        <Poptip class="pull-right" placement="bottom-end">
          <Button>说明</Button>
          <div slot="content">
            说明：<br>
            1、地域对比模块可通过查询条件，查询不同年份，某地区之间消耗量的对比。<br>
            2、查询条件默认为当前年份<br>
            3、鼠标单击地图上的某一省份，则进入省份的地图，有不同城市的区块<br>
            选择完查询条件，点击查询，通过柱状图和下方的统计报表可查看区域对比情况。
          </div>
        </Poptip>

      </div>

      <div id="chart-bar"></div>

        <Table border :columns="columns1" :data="data1"></Table>
    </Card>
    </Row>

  </div>

</template>

<style scoped>
  #chart-bar {
    width: 100%;
    height: 600px;
    margin: 10px auto;
  }
</style>
<script type="text/ecmascript-6">

  //import api from '@/fetch/api';
  import mapJson from '@/assets/mapJson/json.js';
  import * as echarts from 'echarts';
  import 'echarts/chart/bar';
  import 'echarts/chart/map';
  import 'echarts/component/toolbox';
  import 'echarts/component/tooltip';
  import 'echarts/component/legend';
  import 'echarts/component/title';

  let myChartBar = null;

  export default {
    beforeMount () {

    },
    mounted() {
      myChartBar = echarts.init(document.getElementById('chart-bar'));
      this.initBar();
    },
    data () {
      return {
        model1: '',
        input1: '',
        modelYear:'',
          columns1: [
              {
                  title: '对比项',
                  key: 'name1',
                  width:80
              },
              {
                  title: '1月',
                  key: 'name2'
              },
              {
                  title: '2月',
                  key: 'name3'
              },
              {
                  title: '3月',
                  key: 'name4'
              },
              {
                  title: '4月',
                  key: 'name5'
              },
              {
                  title: '5月',
                  key: 'name6'
              },
              {
                  title: '6月',
                  key: 'name7'
              },
              {
                  title: '7月',
                  key: 'name8'
              },
              {
                  title: '8月',
                  key: 'name9'
              },
              {
                  title: '9月',
                  key: 'name10'
              },
              {
                  title: '10月',
                  key: 'name11'
              },
              {
                  title: '11月',
                  key: 'name12'
              },
              {
                  title: '12月',
                  key: 'name13'
              },
              {
                  title: '总量',
                  key: 'name14'
              },
          ],
          data1: [
              {
                  name1: '一号加气站',
                  name2: '1132222',
                  name3: '1132',
                  name4: '1132',
                  name5: '211',
                  name6: '1132',
                  name7: '1132',
                  name8: '1132',
                  name9: '1132',
                  name10: '2021',
                  name11: '1132',
                  name12: '1132',
                  name13: '1132',
                  name14: '2021',
              },
              {
                  name1: '二号加气站',
                  name2: '1132',
                  name3: '1132',
                  name4: '1132',
                  name5: '211',
                  name6: '1132',
                  name7: '1132',
                  name8: '1132',
                  name9: '1132',
                  name10: '2021',
                  name11: '1132',
                  name12: '1132',
                  name13: '1132',
                  name14: '2021',
              }
          ],
      }
    },
    methods: {
      initBar() {
        let optionBar = {
            title : {
                text: '地域对比',

            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['1号加气站','2号加气站']
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'1号加气站',
                    type:'bar',
                    data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                },
                {
                    name:'2号加气站',
                    type:'bar',
                    data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                    markPoint : {
                        data : [
                            {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
                            {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name : '平均值'}
                        ]
                    }
                }
            ]
        };

        myChartBar.setOption(optionBar);
      },
    },

  };
</script>
